<template>
  <div class="sort">
    <!-- <go-back></go-back> -->
    <van-search placeholder="请输入搜索关键词" input-align="center" />

    <!-- 分类列表 -->
    <div class="sortu">
      <ul class="sorts">
        <li>本周特惠</li>
        <li>美妆</li>
        <li>酒水</li>
        <li>小家电</li>
        <li>服饰</li>
        <li>鞋靴</li>
        <li>视频</li>
        <li>箱包</li>
        <li>食品</li>
        <li>家电</li>
        <li>厨卫</li>
        <li>汽配</li>
        <li>家电</li>
        <li>厨卫</li>
        <li>汽配</li>
      </ul>
      <div class="sortdeta">
        <div class="sorthe">
          <span class="sortdetaulh">热门精选</span>
          <ul class="sortdetaul">
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
          </ul>
        </div>
        <!--  -->
                <div class="sorthe">
          <span class="sortdetaulh">热门精选</span>
          <ul class="sortdetaul">
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
            <li>
              <img src="../assets/image/pic/commodity/05.png" alt="" />
              <p>热卖爆品</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- <ul>
      <li
        @click="goList(item.id)"
        class="goods"
        v-for="item in sortlist"
        :key="item.id"
      >
        分类名称：{{ item.name }}
        <p>价格：{{item.price | toPrice(2)}}</p>
        <p>
          时间===={{item.timer | toTime}}
        </p>
        <p>
          时间===={{item.timer | toTime('YYYY/MM/DD HH:mm:ss')}}
        </p>
      </li>
       上面是编程式跳转 -->

    <!-- <li
        class="goods"
        v-for="item in sortlist"
        :key="item.id"
      > -->
    <!-- <router-link :to="'/list?id='+item.id+'&name=10'">
        :to="'/list?query参数名='item.id"
          分类名称：{{ item.name }} -->
    <!-- <p>价格：{{item.price | toPrice(2)}}</p> -->
    <!-- <p> -->
    <!-- 时间===={{item.timer | toTime}} -->
    <!-- </p> -->
    <!-- <p> -->
    <!-- 时间===={{item.timer | toTime('YYYY/MM/DD HH:mm:ss')}} -->
    <!-- </p> -->
    <!-- </router-link> -->
    <!-- </li> -->
    <!-- </ul>  -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      sortlist: [
        {
          id: 1,
          name: "空调",
          price: 1899,
          timer: 1623979482873,
        },
        {
          id: 2,
          name: "厨房用电",
          price: 256,
          timer: 1624579482873,
        },
        {
          id: 3,
          name: "手机",
          price: 6668,
          timer: 1682379482873,
        },
      ],
    };
  },
  methods: {
    //封装一个跳转列表事件
    goList(id) {
      // 编程式跳转
      //   this.$router.push('/list?id='+id)
      this.$router.push({
        path: "/list",
        // query跳转传参
        query: {
          //传递n个参数
          id,
        },
      });
    },
  },
};
</script>

<style scoped>
.sort {
  margin-top: 2rem;
}
.goods {
  width: 80%;
  margin: 10px auto;
  background-color: indianred;
}
.sortu {
  display: flex;
}
.sortu .sorts {
  width: 2.26rem;
  height: 100%;
  font-family: PingFangSC-Light;
  font-size: 0.28rem;
  color: #999999;
  text-align: center;
  line-height: 0.28rem;
}
.sortu .sorts li {
  margin-top: 0.5rem;
}
.sortdeta {
  margin-left: 0.4rem;
}
.sorthe{
  /* background: chartreuse; */
  width: 4.64rem;

}
.sortdetaul {
  width: 4.44rem;
  height: 4rem;
  padding-top: 0.2rem;
  padding-left: 0.2rem;
  /* background: royalblue; */

  
}
.sortdetaulh {
  font-family: PingFangSC-Semibold;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.32rem;
}
.sortdetaul li {
  width: 1.28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: 0.2rem;
  margin-bottom: 0.2rem;
  /* background: seagreen; */
  float: left;
}
.sortdetaul li img {
  width: 1.28rem;
  height: 1.28rem;
}
</style>
